<template>
    <el-dialog :append-to-body="true" v-model="visible" width="366" :before-close="handleClose"
        class="close-client-dialog" center>
        <div class="content">
            <h3>关闭客户端</h3>
            <p>请确认您希望进行的操作</p>
            <el-radio-group v-model="radio">
                <el-radio :label="2">退出云电脑</el-radio>
                <el-radio :label="1">最小化到托盘</el-radio>
            </el-radio-group>
            <el-button class="cs-button" type="text" @click="autoAlertAtion">
                <img v-if="autoAlert" class="iconsize" src="@/assets/images/usercenter/user_selectok.png" alt="">
                <img v-if="!autoAlert" class="iconsize" src="@/assets/images/usercenter/user_selectnook.png" alt="">
                <span v-if="autoAlert" style="color: #E2E2E2;">不再提醒</span>
                <span v-if="!autoAlert" style="color: #888888;">不再提醒</span>
            </el-button>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="visible = false">取消</el-button>
                <el-button type="primary" @click="save()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
import { getLocalStorageValue, setLocalStorageValue } from '@/utils/auth'

const radio = ref(1)
const autoAlert = ref(false)
const isDataLoaded = ref(false) // 添加加载状态

// Props
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})

// Refs
const visible = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
})

// 方法
const handleClose = () => {
    emit('close')
}

// 保存
const save = async () => {
    emit('close')

    // 延时一秒执行
    await new Promise((resolve) => {
        setTimeout(async () => {
            try {
                await setLocalStorageValue('autoAlert', autoAlert.value.toString()) //不再提醒
                await setLocalStorageValue('closeAction', radio.value.toString()) // 关闭动作

                if (window.chrome && window.chrome.webview) {
                    if (radio.value == 1) {
                        let params = { action: 'minimizeWindow' }
                        window.chrome.webview.postMessage(params)
                    } else {
                        let params = { action: 'exit' }
                        window.chrome.webview.postMessage(params)
                    }
                }
            } catch (error) {
                console.error('保存设置失败:', error)
            }

            resolve()
        }, 100) // 延时1秒
    })
}

// Emits
const emit = defineEmits(['update:modelValue', 'close'])

const autoAlertAtion = () => {
    autoAlert.value = !autoAlert.value
}

onMounted(async () => {
    // 只有当组件可见时才加载数据
    if (visible.value) {
        await loadSettings()
    }
})

// 将设置加载逻辑提取为独立函数
const loadSettings = async () => {
    if (isDataLoaded.value) return // 避免重复加载

    try {
        // 获取关闭动作设置
        const closeActionValue = await getLocalStorageValue('closeAction')
        console.log(closeActionValue);
        
        if (closeActionValue == 2 || closeActionValue === '2') {
            radio.value = 2
        } else {
            radio.value = 1 // 默认值
        }

        // 获取提醒设置
        const autoAlertValue = await getLocalStorageValue('autoAlert')
           console.log(autoAlertValue);
        if (autoAlertValue == 'true' || autoAlertValue == true) {
            autoAlert.value = true
        } else {
            autoAlert.value = false
        }

        isDataLoaded.value = true
    } catch (error) {
        console.error('获取设置失败:', error)
    }
}

// 监听 visible 变化，当组件变为可见时加载数据
import { watch } from 'vue'

watch(() => props.modelValue, (newVal) => {
    if (newVal) {
        loadSettings()
    }
}, { immediate: true })



</script>

<style lang="scss">
.close-client-dialog {
    .el-dialog__header {
        padding: 20px !important;

        .el-dialog__title {
            color: #fff;
        }
    }

    .el-dialog__body {
        padding: 0 40px;

        h3 {
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }

        p {
            margin: 11px 0;
            color: #888;
            font-size: 14px;
        }

        .cs-button {
            margin: 10px 0;
        }
    }

    .el-dialog__footer {
        padding-top: 0 !important;
        padding-bottom: 38px;

        .el-button {
            width: 135px;
            height: 50px;
            background: #232527;
            border: #232527;
            color: #e2e2e2;
            font-size: 14px;
            font-weight: bold;

            &.el-button--primary {
                background: #ffe500;
                border-color: #ffe500;
                color: #121212;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
/* 隐藏原生单选按钮样式 */
:deep(.el-radio__inner) {
    width: 20px;
    height: 20px;
    border: none;
    background: none;
    outline: none;
}

/* 未选中状态图片 */
:deep(.el-radio__inner:not(:checked)) {
    background-image: url('@/assets/images/usercenter/user_radio_n.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 选中状态图片 */
:deep(.el-radio__input.is-checked .el-radio__inner) {
    background-image: url('@/assets/images/usercenter/user_radio_y.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent !important;
    border-color: transparent !important;

    &::after {
        display: none;
    }
}

/* 去除选中时的外层边框高亮 */
:deep(.el-radio__input.is-checked + .el-radio__label) {
    color: #E2E2E2;
}
</style>